<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣日志 - 甜蜜空间</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/diary.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 添加Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <h1><i class="fas fa-heart"></i> 甜蜜空间</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="album.html">相册</a></li>
                    <li><a href="diary.html" class="active">日志</a></li>
                    <li><a href="memory.html">纪念日</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="diary-header">
        <div class="container">
            <h2>我们的生活日志</h2>
            <p>记录每一天的点滴，分享彼此的心情与感受</p>
            <button id="new-diary-btn" class="btn btn-primary"><i class="fas fa-plus"></i> 写新日志</button>
        </div>
    </section>

    <section class="diary-content">
        <div class="container">
            <div class="diary-main">
                <div class="diary-entries">
                    <div class="diary-entry diary-card" data-id="1">
                        <div class="entry-header diary-header">
                            <div class="entry-author">
                                <div class="author-avatar">
                                    <img src="img/couples/girl.jpg" alt="小红">
                                </div>
                                <div class="author-info">
                                    <h3>小红</h3>
                                    <div class="mood"><i class="fas fa-heart"></i> 甜蜜</div>
                                </div>
                            </div>
                            <div class="entry-date">2023年10月18日</div>
                        </div>
                        <div class="entry-content">
                            <h3>美好的一天开始了</h3>
                            <p>今天早上收到了男朋友送的花，真的很惊喜！没想到他会记得我们认识的纪念日。这束花特别漂亮，我已经把它放在了卧室的桌子上，每次看到都会感到很温暖。</p>
                            <p>下午我们一起去了那家我们第一次约会的咖啡厅，点了相同的饮料和甜点。时间过得真快，一年了，但感觉就像昨天一样。我们聊了很多关于未来的计划，真期待我们一起创造的每一个明天。</p>
                            <div class="entry-photos">
                                <img src="img/diary/diary1-1.jpg" alt="日志照片1">
                                <img src="img/diary/diary1-2.jpg" alt="日志照片2">
                            </div>
                            <div class="entry-actions">
                                <button class="btn-like"><i class="fas fa-heart"></i> <span>12</span></button>
                                <button class="btn-comment"><i class="fas fa-comment"></i> <span>3</span></button>
                                <button class="btn-share"><i class="fas fa-share"></i></button>
                            </div>
                            <div class="entry-comments">
                                <div class="comment">
                                    <div class="comment-avatar">
                                        <img src="img/couples/boy.jpg" alt="小明">
                                    </div>
                                    <div class="comment-content">
                                        <h4>小明</h4>
                                        <p>看到你开心，我就开心 ❤️</p>
                                        <span class="comment-date">2023年10月18日</span>
                                    </div>
                                </div>
                                <div class="add-comment">
                                    <textarea placeholder="添加评论..."></textarea>
                                    <button class="btn btn-primary btn-sm">发送</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="diary-entry diary-card" data-id="2">
                        <div class="entry-header diary-header">
                            <div class="entry-author">
                                <div class="author-avatar">
                                    <img src="img/couples/boy.jpg" alt="小明">
                                </div>
                                <div class="author-info">
                                    <h3>小明</h3>
                                    <div class="mood"><i class="fas fa-smile"></i> 开心</div>
                                </div>
                            </div>
                            <div class="entry-date">2023年10月15日</div>
                        </div>
                        <div class="entry-content">
                            <h3>周末公园野餐</h3>
                            <p>今天天气特别好，阳光明媚但不炎热。我们早上准备了野餐的食物，然后去了城市公园。找了一个安静的角落铺上野餐垫，度过了一个惬意的下午。</p>
                            <p>我们带了三明治、水果沙拉、饼干和果汁。最棒的是，我们还带了棋盘游戏，在草地上玩了好几个小时。看着你开心的笑容，感觉整个世界都变得美好了。</p>
                            <div class="entry-photos">
                                <img src="img/diary/diary2-1.jpg" alt="日志照片1">
                                <img src="img/diary/diary2-2.jpg" alt="日志照片2">
                                <img src="img/diary/diary2-3.jpg" alt="日志照片3">
                            </div>
                            <div class="entry-actions">
                                <button class="btn-like"><i class="fas fa-heart"></i> <span>15</span></button>
                                <button class="btn-comment"><i class="fas fa-comment"></i> <span>2</span></button>
                                <button class="btn-share"><i class="fas fa-share"></i></button>
                            </div>
                            <div class="entry-comments">
                                <div class="comment">
                                    <div class="comment-avatar">
                                        <img src="img/couples/girl.jpg" alt="小红">
                                    </div>
                                    <div class="comment-content">
                                        <h4>小红</h4>
                                        <p>下次我们要再去！这次我来准备食物 😊</p>
                                        <span class="comment-date">2023年10月15日</span>
                                    </div>
                                </div>
                                <div class="add-comment">
                                    <textarea placeholder="添加评论..."></textarea>
                                    <button class="btn btn-primary btn-sm">发送</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="diary-entry diary-card" data-id="3">
                        <div class="entry-header diary-header">
                            <div class="entry-author">
                                <div class="author-avatar">
                                    <img src="img/couples/girl.jpg" alt="小红">
                                </div>
                                <div class="author-info">
                                    <h3>小红</h3>
                                    <div class="mood"><i class="fas fa-meh"></i> 平静</div>
                                </div>
                            </div>
                            <div class="entry-date">2023年10月10日</div>
                        </div>
                        <div class="entry-content">
                            <h3>雨天的思考</h3>
                            <p>今天一整天都在下雨，窗外的雨滴打在窗户上的声音让人感到宁静。我泡了一杯热茶，坐在窗边看书，偶尔抬头看看窗外模糊的景色。</p>
                            <p>这样安静的日子让我有时间思考我们的关系和未来。我很感激有你在我的生活中，无论是在阳光明媚的日子里一起笑，还是在雨天一起依偎。希望我们的爱情像这雨水一样，滋润着彼此的心田，让我们一起成长。</p>
                            <div class="entry-actions">
                                <button class="btn-like"><i class="fas fa-heart"></i> <span>10</span></button>
                                <button class="btn-comment"><i class="fas fa-comment"></i> <span>1</span></button>
                                <button class="btn-share"><i class="fas fa-share"></i></button>
                            </div>
                            <div class="entry-comments">
                                <div class="add-comment">
                                    <textarea placeholder="添加评论..."></textarea>
                                    <button class="btn btn-primary btn-sm">发送</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="load-more">
                    <button class="btn btn-secondary">加载更多</button>
                </div>
            </div>
        </div>
    </section>

    <div id="new-diary-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>写新日志</h2>
            <div class="diary-form">
                <div class="form-group">
                    <label>标题</label>
                    <input type="text" placeholder="给你的日志起个标题吧...">
                </div>
                <div class="form-group">
                    <label>心情</label>
                    <div class="mood-selector">
                        <button class="mood-btn" data-mood="happy"><i class="fas fa-smile"></i> 开心</button>
                        <button class="mood-btn" data-mood="sad"><i class="fas fa-frown"></i> 难过</button>
                        <button class="mood-btn" data-mood="love"><i class="fas fa-heart"></i> 甜蜜</button>
                        <button class="mood-btn" data-mood="angry"><i class="fas fa-angry"></i> 生气</button>
                        <button class="mood-btn" data-mood="neutral"><i class="fas fa-meh"></i> 平静</button>
                    </div>
                </div>
                <div class="form-group">
                    <label>内容</label>
                    <textarea rows="8" placeholder="今天发生了什么？有什么想法和感受..."></textarea>
                </div>
                <div class="form-group">
                    <label>添加照片</label>
                    <div class="photo-upload">
                        <button class="btn btn-secondary"><i class="fas fa-camera"></i> 选择照片</button>
                        <input type="file" accept="image/*" multiple style="display: none;">
                        <div class="upload-preview">
                            <!-- 照片预览区域 -->
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>谁可以看</label>
                    <select>
                        <option value="all">我们两个人</option>
                        <option value="me">仅自己</option>
                    </select>
                </div>
                <div class="form-buttons">
                    <button class="btn btn-secondary">保存草稿</button>
                    <button class="btn btn-primary">发布日志</button>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2023 甜蜜空间 - 你我的专属恋爱天地</p>
            <p>一起创造更多美好回忆</p>
        </div>
    </footer>

    <!-- 引入Bootstrap和数据加载相关脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/data-loader.js"></script>
    <script src="js/upload-manager.js"></script>
    <script src="js/diary-editor.js"></script>
    <script src="js/diary.js"></script>
</body>
</html> 